<template>
  <div class="div" ref="div">
    
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted,ref,reactive} from 'vue'
import {getdian} from '../../request/index'
const option=reactive({
  legend: {icon:'circle',textStyle:{color:'#fff'}},
  xAxis: { type: 'category' },
  yAxis: {},
  series: []
})
const div=ref()
let myChart 
onMounted(()=>{
  
    getdian().then(res=>{
       myChart=echarts.init(div.value)
      console.log('水电数据',res.data.data.result[0]);
        option.legend.data=res.data.data.result[0].series.map(item=>item.name)
        option.xAxis.data=res.data.data.result[0].yAxis.data 
        option.series=res.data.data.result[0].series
       myChart.setOption(option)
    })
   
   


})

  window.addEventListener('resize', function() {
    myChart.resize();
  });

</script>

<style scoped>
.div{
    height:90%;
}
</style>